<template>
    <div style="height: 100%">
        <el-form class="query-form query-form-2" :inline="true">
            <p class="f-18 m-b-20">水电煤系数模板关联房间</p>
            <p class="f-14 m-b-20">模板名称：{{name}}</p>
            <el-form-item style="position:absolute;right:0.2rem;top: .2rem;">
                <el-button type="info" @click="$router.push('/coefficient/list')">返回</el-button>
            </el-form-item>
        </el-form>
        <div class="div-table">
            <el-table ref="multipleTable" class="roomTable" :data="tableData">
                <el-table-column prop="name0" label="所属楼宇"></el-table-column>
                <el-table-column prop="room0" label="房间号"></el-table-column>
                <el-table-column prop="name1" label="所属楼宇"></el-table-column>
                <el-table-column prop="room1" label="房间号"></el-table-column>
                <el-table-column prop="name2" label="所属楼宇"></el-table-column>
                <el-table-column prop="room2" label="房间号"></el-table-column>
                <el-table-column prop="name3" label="所属楼宇"></el-table-column>
                <el-table-column prop="room3" label="房间号"></el-table-column>
            </el-table>
        </div>
        <!-- <div class="page-div-placeholder"></div>
        <div class="page-div" style="background:#fff;">
            <el-pagination layout="prev, pager, next,jumper,sizes" :current-page="pageObj.page"
                :page-size="pageObj.pageSize" :total="pageObj.total">
            </el-pagination>
        </div> -->
    </div>
</template>

<script>
    import { listMixin } from "@/mixin"
    import {
        modifyTheAssociatedRoom
    } from "@/api/operations/coefficient/coefficient";

    export default {
        mixins: [listMixin],
        data() {
            return {
                tableData: [],
                name: ""
            };
        },
        methods: {
            loadData(id) {
                modifyTheAssociatedRoom(id).then(res => {
                    let data = res.data;
                    let itemData = {};
                    for (let i = 0; i < data.length; i++) {
                        let iIndex = i % 4;
                        itemData['name' + iIndex] = data[i].buildingName;
                        itemData['room' + iIndex] = data[i].houseNumber;
                        //0 1 2 3 // 3为最后一次轮回 或者 已经到了最后数据了
                        if ((iIndex === 3) || (i === (data.length - 1))) {
                            this.tableData.push(JSON.parse(JSON.stringify(itemData)));
                            itemData = {};
                        }
                    }
                });
            },
        },
        mounted() {
            let id = this.$route.params.id;
            if (id) {
                this.loadData(id);
            }
            this.name = this.$route.query.name;
        },
    };
</script>
